<template xmlns:el-colc="http://www.w3.org/1999/html">
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view my_layout">
      <!--      第一行方 设备信息和状态-->
      <el-row class="dev_info_el_row_wrapper">
        <el-col :span="12">
          <div class="device_info_wrapper">
            <div class="left_img">
              <el-image fit="cover" :src="thisPageState.imgBaseUrl+thisPageState.iotDevice.deviceImg"></el-image>
            </div>
            <div class="device_info">
              <div class="device_name">
                {{thisPageState.iotDevice.deviceName}}
              </div>
              <div class="device_code">
                <div>
                  设备编号： {{thisPageState.iotDevice.deviceCode}}
                </div>
                <div>
                  <dict-tag :options="iot_device_online_status_dict" :value="thisPageState.iotDevice.deviceOnlineStatus"></dict-tag>
                </div>
                <div>
                  <dict-tag :options="iot_device_bind_status_dict" :value="thisPageState.iotDevice.deviceBindStatus"></dict-tag>
                </div>
              </div>
              <div v-if="thisPageState.farmGreenhouse?.farmBaseInfo" class="house_name">
                {{thisPageState.farmGreenhouse?.farmBaseInfo?.baseName }} &nbsp;&nbsp; {{ thisPageState.farmGreenhouse?.houseName }}
              </div>
            </div>


          </div>
        </el-col>



      </el-row>

      <!--      第二行 不同的设备标签页也不同 切换不同的 显示内容 @tab-click="handleClick"-->
      <el-row class="dev_data_tab_el_row_wrapper">
        <el-tabs v-model="thisPageState.activeDeviceTabName" >
          <el-tab-pane v-for="item,index in thisPageState.deviceTabList" :key="index" :label="item.label" :name="item.name">{{ item.label }}</el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    <div class="layout-padding-auto layout-padding-view">
      <component :is="devState" :iotDevice="thisPageState.iotDevice" v-if="thisPageState.activeDeviceTabName==='devState'"></component>
      <component :is="devMessage" :iotDevice="thisPageState.iotDevice" v-if="thisPageState.activeDeviceTabName==='devMessage'"></component>
      <!--      <data-cap :iot-device="thisPageState.iotDevice" v-if="thisPageState.activeDeviceTabName==='dataCap'"></data-cap>-->
      <component :is="dataCap" :iotDevice="thisPageState.iotDevice" v-if="thisPageState.activeDeviceTabName==='dataCap'"></component>

      <component :is="dataAnalysis" :iotDevice="thisPageState.iotDevice" v-if="thisPageState.activeDeviceTabName==='analysis'"></component>


    </div>


  </div>
</template>

<script setup lang="ts" name="deviceRunData">
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
//根据ID获取设备信息
import { getObj as getDeviceObj } from "/@/api/iot/iotDevice";
//根据ID获取设备信息
import { getObj as getDeviceCatgoryObj  } from "/@/api/iot/iotDeviceCategory";

//根据ID获取大棚信息
import { getObj as getFarmGreenhouseObj } from "/@/api/farm/farmGreenhouse";
//根据ID获取基地信息
import { getObj as getFarmBaseObj } from "/@/api/farm/farmBaseinfo";

const route=useRoute();



/**
 * 设备功能标签页切换
 */
const thisPageState=reactive({
  iotDevice:{}, //目录信息获取以iotDeviceCategory存储
  deviceTabList:[
    {label:"设备状态",name:"devState"},
    {label:"数据采集",name:"dataCap"},
    {label:"远程控制",name:"remoteControl"},
    {label:"智能检测",name:"aiDet"},
    {label:"定时任务",name:"timeJob"},
    {label:"设备日志",name:"log"},
    {label:"数据分析",name:"analysis"},
    {label:"设备消息",name:"devMessage"},

  ],
  activeDeviceTabName:"",
  farmGreenhouse:{}, //基地信息获取以farmBaseInfo存储

  imgBaseUrl:"/api"
})


/**
 * 获取后端地址
 */
thisPageState.imgBaseUrl=import.meta.env.VITE_API_URL

//todo 测试kgbot新增一个设备状态
const devState=ref(null)
const devMessage=ref(null)
// 数据采集组件引入
const dataCap =ref(null);
//数据分析页面引入
const dataAnalysis=ref(null)

/**
 * 根据不同的设备类别跳转到不同的页面 todo 如果这里的跳转页面过多可以存储在数据库中查询 这里直接根据分类检索就好 避免过多if语句 还有就是为了加快速度 直接从类别ID获取，从后端查询
 */
function getDataCapComponent(){
  thisPageState.activeDeviceTabName="dataCap" //todo 测试的时候使用
  // console.log("获取组件")
  if(thisPageState.iotDevice?.iotDeviceCategory?.categoryCode==="kgBotCam"){
    // console.log("动态获取kgbotcam组件")
    thisPageState.activeDeviceTabName="devState" //todo 测试的时候使用 巡检机器人多家一个tab 设备状态用来存放设备详情
    devState.value=defineAsyncComponent(()=> import('./duorouKgbotcamFile/devState.vue')) //
    devMessage.value=defineAsyncComponent(()=> import('./duorouKgbotcamFile/devMessage.vue'))
    dataCap.value=defineAsyncComponent(()=> import('./duorouKgbotcamFile/dataCap.vue'))
  }
  // console.log("获取组件")
  if(thisPageState.iotDevice?.iotDeviceCategory?.categoryCode==="kgNpk"){
    dataCap.value=defineAsyncComponent(()=> import('./duorouKgnpkDevData/dataCap.vue'))
    devMessage.value=defineAsyncComponent(()=> import('./duorouKgnpkDevData/devMessage.vue'))
  }
}
/**
 * 根据不同的设备类别跳转到不同的页面 todo 如果这里的跳转页面过多可以存储在数据库中查询 这里直接根据分类检索就好 避免过多if语句 还有就是为了加快速度 直接从类别ID获取，从后端查询
 */
function getDataAnalysisComponent(){
  // console.log("获取组件")
  if(thisPageState.iotDevice?.iotDeviceCategory?.categoryCode==="kgBotCam"){
    // console.log("动态获取kgbotcam组件")
    dataAnalysis.value=defineAsyncComponent(()=> import('./duorouKgbotcamFile/dataAnalysis.vue'))
  }
  // console.log("获取组件")
  if(thisPageState.iotDevice?.iotDeviceCategory?.categoryCode==="kgNpk"){
    dataAnalysis.value=defineAsyncComponent(()=> import('./duorouKgnpkDevData/dataAnalysis.vue'))
  }
}

/**
 * 获取各个组件
 */
function getComponents(){
  getDataCapComponent()
  getDataAnalysisComponent()
}



/**
 * 从路由传递的参数获取 设备ID 之后获取详细信息
 */
thisPageState.iotDevice.id=route.query.iotDeviceId
function getIotDeviceInfoById(devId){
  getDeviceObj(devId)
  .then(res=>{
    // console.log(res)
    thisPageState.iotDevice=res.data

    //获取设备所属的分类信息
    if(thisPageState.iotDevice.deviceCategoryId){
      getDeviceCatgoryObj(thisPageState.iotDevice.deviceCategoryId)
          .then(response=>{
            thisPageState.iotDevice.iotDeviceCategory=response.data
            getComponents()
            // console.log(dataCap)
          })
    }
  })
}
getIotDeviceInfoById(thisPageState.iotDevice.id)

/**
 * 获取在线状态和绑定状态的字典
 */
const {
  iot_device_online_status_dict,
  iot_device_bind_status_dict
} = useDict('iot_device_online_status_dict', 'iot_device_bind_status_dict');


/**
 * 从路由传递的参数获取 大棚ID 之后获取详细信息
 */
thisPageState.farmGreenhouse.id=route.query.greenhouseId
function getFarmGreenhouseById(greenhouseId){
  if(greenhouseId){
    getFarmGreenhouseObj(greenhouseId)
        .then(res=>{
          // console.log(res)
          thisPageState.farmGreenhouse=res.data

          //获取大棚所属基地信息
          if(thisPageState.farmGreenhouse.baseinfoId){
            getFarmBaseObj(thisPageState.farmGreenhouse.baseinfoId)
                .then(response=>{
                  thisPageState.farmGreenhouse.farmBaseInfo=response.data
                })
          }
        })
  }

}
getFarmGreenhouseById(thisPageState.farmGreenhouse.id)


</script>


<style lang="scss" scoped>
.my_layout{
  height: fit-content;
  flex: none;
  margin-bottom: 0px;
  padding-bottom: 0;
  .dev_info_el_row_wrapper{
    background: white;
    padding: 18px 15px;
    padding-bottom: 23px;
    margin-bottom: 0;
  }
  .dev_data_tab_el_row_wrapper{
    padding-left: 15px;
    background: white;
    margin-bottom: 15px;
  }
  :deep(.el-tabs){
    .el-tabs__header{
      margin-bottom: 0;
      .el-tabs__nav-wrap{
        .el-tabs__item{
          font-size: 16px;
        }
        .el-tabs__nav-scroll:after{
          display: none;
        }
        &:after{
          background: none;
        }
      }
    }
    .el-tabs__content{
      display: none;
    }
  }
}
.device_info_wrapper{
  display: flex;
  align-items: center;
  gap: 18px;
  .left_img{
    :deep(.el-image){
      width: 80px;
      height: 80px;
      border-radius: 2px;
    }
  }
  .device_info{
    .device_name{
      font-size: 18px;
    }
    .device_code{
      margin-top: 11px;
      color: #7c7c7c;
      display: flex;
      gap: 15px;
      justify-content: center;
      align-items: center;

    }
    .house_name{
      margin-top: 5px;
      color: #7c7c7c;
    }
  }
}

.base_house_info_wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  //align-items: center;
  .base_house_info{
    text-align: right;
    width: 100%;
    .base_house_name{
      font-size: large;
      color: #7c7c7c;
    }
  }
}
</style>